
<script>
import { getUserList } from '@/api/user'
export default {
  data() {
    return {
      userList: [],
      currentPage: 1
    }
  },
  mounted() {
    getUserList().then(res => {
      // console.log(res)
      this.userList = res.data
    })
  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData() {
      return this.userList.slice((this.currentPage - 1) * 15, (this.currentPage - 1) * 15 + 15)
    }
  }
}
</script>

<template>
  <div>
    用户列表
    <el-table :data="computedTableData">
      <el-table-column type="index" :index="(currentPage - 1) * 15 + 1" label="序号" width="180" align="center"></el-table-column>
      <el-table-column prop="userid" label="用户id" align="center"></el-table-column>
      <el-table-column prop="tel" label="手机号" align="center"></el-table-column>
    </el-table>

    <!-- ------------------做分页显示用的------------------------ -->
    <el-pagination background layout="prev, pager, next" :total="userList.length" v-model:current-page="currentPage" />
  </div>
</template>